<template>
  <div class=" text-gray-100  bg-gray-900 min-h-screen    ">
    <div class="container mx-auto">
      <h1>Movie_list.vue</h1>
      <hr>
      <div v-for="item in movie_list">
<!--        <h1 class="hover:text-green-500 " ><a target="_blank" :href="'/movieword/' + item">{{item}}</a></h1>    -->
        <h1 class="hover:text-green-500 " ><a href="#"  @click="openThis(item)">{{item}}</a></h1>
      </div>


      <!--    -->
      <transition
          enter-active-class="transition-all transition-fastest ease-out-quad"
          leave-active-class="transition-all transition-faster ease-in-quad"
          enter-class="opacity-0 scale-70"
          enter-to-class="opacity-100 scale-100"
          leave-class="opacity-100 scale-100"
          leave-to-class="opacity-0 scale-70"         >
        <main      v-if="isOpen === true"     class="       fixed inset-0 flex items-center justify-center             "   @close="isOpen = false">
          <div    @click="isOpen = false"      class="    bg-black  opacity-50   fixed inset-0 flex items-center justify-center         text-red   ">345903459523040392</div>
          <div class="max-w-lg w-full bg-white rounded-lg shadow-2xl px-6 py-6     z-30      ">
            <h2 class="font-semibold text-gray-900 text-2xl leading-tight border-b-2 border-gray-200 pb-4">  {{movie_name}}  </h2>
            <div>
              <h1><a  target="_blank" :href="'/moviescript/' + this.movie_name"    class="text-black  hover:text-green-600"> script  </a></h1>
              <h1><a  target="_blank" :href="'/movieword/' + this.movie_name"   class="text-black  hover:text-green-600"> word </a></h1>
            </div>
            <div class="mt-6">
              <button   @click="isOpen = false"   class="ml-4 px-4 py-2 text-gray-800  bg-red-300">Cancel</button>
            </div>
          </div>
        </main>
      </transition>
      <!--    -->




    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "Movie_word_list",
  components: {
  },
  data() {
    return {
      isOpen:false,
      movie_list: [],
      movie_name : '',
    }
  },
  watch: {
  },
  methods: {
    openThis(item){
      console.log(item)
      this.movie_name = item
      this.isOpen = true
    }
  },
  created() {
    document.title = 'Movie list'
    let ___this = this
    axios.get('http://127.0.0.1:8123/movies/').then(response => {
      console.log(response.data)
      ___this.movie_list = response.data
    })
  }
}
</script>

<style scoped>

</style>
